<template>
	<view class="safety forgetPassword">
		<view class="flex oneLine ">
			<input class="input" style="margin-top: 40rpx;" v-model="oldPhone" placeholder="请输入现有手机号码">
			</input>
		</view>
		<view class="codeBox">
			<view class="flex oneLine">
				<input class="input" v-model="oldYzm" placeholder="请输入验证码"></input>
			</view>
			<view class="btn flex-center" @click="onGetOldVerificationCode()">{{isSend ? `${time} S` : "获取验证码"}}</view>
		</view>
		<view class="flex oneLine ">
			<input class="input" style="margin-top: 40rpx;" v-model="phone" placeholder="请输入新手机号码">
			</input>
		</view>
		<view class="codeBox">
			<view class="flex oneLine">
				<input class="input" v-model="yzm" placeholder="请输入验证码"></input>
			</view>
			<view class="btn flex-center" @click="onGetVerificationCode()">{{isSend ? `${time} S` : "获取验证码"}}</view>

		</view>
		<button class="set-btn" form-type="submit" @click="submit">保存</button>
	</view>
</template>

<script>
	import {
		getYZM,
		changePhone,
		getVerificationCode
	} from "../../../api/index.js"
	export default {
		data() {
			return {
				phone: "",
				oldPhone: "",
				oldYzm: "",
				yzm: "",
				isSend: false,
				isOldSend: false,
				time: 60,
				pageType: '',
			}
		},
		onLoad(opt) {
			this.pageType = opt.type
		},
		methods: {
			//修改电话
			async onChangePassword() {
				const {
					phone,
					yzm,
					oldPhone,
					oldYzm
				} = this
				switch (true) {
					case !/^1[3456789]\d{9}$/.test(phone):
						this.showToast('请输入正确手机号')
						break;
					case !/^1[3456789]\d{9}$/.test(oldPhone):
						this.showToast('请输入正确手机号')
						break;
					case !yzm:
						this.showToast('请输入验证码')
						break;
					case !oldYzm:
						this.showToast('请输入验证码')
						break;
					default:
						const res = await changePhone('s=ApiMy/settelsub', {
							tel: this.phone,
							smscode: this.yzm,
							oldTel: this.oldPhone,
							oldSmsCode: this.oldYzm
						})
						const {
							status, msg
						} = res.data
						this.showToast(msg)
						if (status == 1) {
							this.goBack(2000)
						}
						// console.log(res, "忘记")
				}
			},
			//发送短信验证码
			async onGetOldVerificationCode() {
				if (this.isOldSend) {
					this.showToast("请勿重复发送验证码")
					return;
				}
				if (/^1[3456789]\d{9}$/.test(this.oldPhone)) {
					// 在验证码
					const res = await getVerificationCode('s=/ApiIndex/sendsmsold', {
						tel: this.oldPhone
					})
					const {
						status,
						msg
					} = res.data
					this.showToast(msg)
					if (status == 1) {
						this.isOldSend = true;
						const timer = setInterval((v) => {
							this.time -= 1;
							if (this.time == 0) {
								this.isOldSend = false;
								this.time = 60;
								clearInterval(timer);
							}
						}, 1000);
					}
				} else {
					this.showToast('请输入正确手机号')
				}
			},
			//发送短信验证码
			async onGetVerificationCode() {
				if (this.isSend) {
					this.showToast("请勿重复发送验证码")
					return;
				}
				if (/^1[3456789]\d{9}$/.test(this.phone)) {
					// 在验证码
					const res = await getVerificationCode('s=/ApiIndex/sendsms', {
						tel: this.phone
					})
					const {
						status,
						msg
					} = res.data
					this.showToast(msg)
					if (status == 1) {
						this.isSend = true;
						const timer = setInterval((v) => {
							this.time -= 1;
							if (this.time == 0) {
								this.isSend = false;
								this.time = 60;
								clearInterval(timer);
							}
						}, 1000);
					}
					// console.log(res,"yanzhengm ")
				} else {
					this.showToast('请输入正确手机号')
				}
			},
			//提交注册信息
			submit() {
				this.onChangePassword()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.oneLine {
		align-items: center;
	}

	.btn {
		width: 200rpx;
		border-radius: 15rpx;
		color: #FFFFFF;
		font-weight: bold;
		background: #41644A;
	}

	.set-btn {
		width: 90%;
		margin: 160rpx 2%;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 15rpx;
		color: #FFFFFF;
		font-weight: bold;
		background: #41644A;
	}

	.checkBigBox {
		text-align: center;
		font-size: 26rpx;
		margin-top: 100rpx;
	}

	.codeButtonBox {}

	.codeBox {
		margin-top: 50rpx;
		display: grid;
		grid-template-columns: 60% 40%;
	}

	.forgetPassword {
		padding: 40rpx;
	}

	.backText {
		color: $uni-color-primary;
		margin-left: 30rpx;
		font-size: 35rpx;
		font-weight: bold;
	}

	.forgetText {
		font-size: 48rpx;
		font-weight: bold;
		margin: 100rpx 0;
	}

	.input {
		background: #F6F4FC;
		border-radius: 20rpx;
		height: 95rpx;
		padding: 0 30rpx;
		border: none;
	}
</style>